[區塊鏈&DAPP介紹 Day26] Dapp 實戰投票系統 - 2 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 26

Modern Web

區塊鏈&DAPP介紹系列第 26 篇

[區塊鏈&DAPP介紹 Day26] Dapp 實戰投票系統 - 2

13th鐵人賽 dapp solidity blockchain

syhlion

團隊神龍特攻隊 - it 宏的逆襲

2021-10-04 09:17:20

1726 瀏覽

分享至

延續昨天沒做完的議題，今天來把 js & html 補完，讓變成一個完整的 Dapp

首先 html 的部分，請修改原本 app 底下的 index.html

<!DOCTYPE html>
<html>
<head>
  <title>活動票選</title>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
</head>
<body class="container">
<h1>活動票選</h1>
<div id="address"></div>
<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
    <tr>
      <th>姓名</th>
      <th>票数</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>去烤肉</td>
      <td id="candidate-1"></td>
    </tr>
    <tr>
      <td>去逛街</td>
      <td id="candidate-2"></td>
    </tr>
    <tr>
      <td>去游泳</td>
      <td id="candidate-3"></td>
    </tr>
    </tbody>
  </table>
  <div id="msg"></div>
</div>
<input type="text" id="candidate" />
<a href="#" onclick="App.voteAction()" class="btn btn-primary">Vote</a>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="index.js"></script>
</html>

再來修改 index.js

import Web3 from "web3";
import voting_artifacts from '../../build/contracts/Voting.json'

let candidates = {"去烤肉": "candidate-1", "去逛街": "candidate-2", "去游泳": "candidate-3"}

const App = {
  web3: null,
  account: null,
  meta: null,

  start: async function () {
    const {web3} = this;

    try {
      這邊做合約初始化的動作
      // get contract instance
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = voting_artifacts.networks[networkId];
      //換成我們新增的 Voting 合約
      this.meta = new web3.eth.Contract(
        voting_artifacts.abi,
        deployedNetwork.address,
      );
      const accounts = await web3.eth.getAccounts();
      this.account = accounts[0];

      this.loadCurrentVoting();
    } catch (error) {
      console.error("Could not connect to contract or chain.");
    }
  },

  //查詢目前票數
  loadCurrentVoting: async function (){

    let candidateNames = Object.keys(candidates);
    const { queryVotes } = this.meta.methods;

    for (var i = 0; i < candidateNames.length; i++) {
      let name = candidateNames[i];
      const v = await queryVotes(this.web3.utils.utf8ToHex(name)).call();
      $("#" + candidates[name]).html(v.toString());
    }
  },

  //投票
  voteAction: async function (){
    let name= $("#candidate").val()
    const { addVote } = this.meta.methods;
    await addVote(this.web3.utils.utf8ToHex(name)).send({ from: this.account });

    this.loadCurrentVoting();
  }
}

//這邊是原本的程式碼
window.App = App;

//此段意思是判斷瀏覽器是否 ehterum的錢包，如果沒有的話，直接直連區塊鏈的位址
$(document).ready(function() {
  if (window.ethereum) {
    App.web3 = new Web3(window.ethereum);
    window.ethereum.enable(); //
  } else {
    console.warn(
        "No web3 detected. Falling back to http://127.0.0.1:7545. You should remove this fallback when you deploy live",
    );
    App.web3 = new Web3(
        new Web3.providers.HttpProvider("http://127.0.0.1:7545"),
    )
  }

  App.start();

});

接下來在原本的 app 目錄裡面，下下面語法